<template>
  <div class="detail">
    <!-- 头部信息 -->
    <div class="header-wrapper">
      <yd-navbar title="订单信息" height='40px' fontsize='16px'>
        <yd-navbar-back-icon slot="left" @click.native="backProcess"></yd-navbar-back-icon>
      </yd-navbar>
    </div>
    <!-- 头部信息 -->
    <!-- 折叠面板内容 -->
    <div class="content-wrapper">
      <yd-accordion accordion v-for="(item,index) in countData" :key="index">
        <yd-accordion-item :title="item[0].productname+'类'">
          <div style="padding: .24rem;" class="erji">
            <yd-accordion accordion v-for="(ele,key) in item" :key="key">
              <div class="bgc">
                <yd-accordion-item :title="ele.productname">
                  <!-- <div class="title">请进行以下的选择</div> -->
                  <div class="mian">
                    <group>
                      <div class="leixing">
                        <popup-radio title="类型" :options="typeOptions" v-model="ele.style" readonly>
                          <p slot="popup-header" class="demo3-slot vux-1px ff">请选择使用类型</p>
                        </popup-radio>
                      </div>
                      <popup-radio title="开门方向" :options="dirOptions" v-model="ele.opentype" readonly>
                        <p slot="popup-header" class="demo3-slot vux-1px ff">请选择开门方向</p>
                      </popup-radio>
                      <x-input title="主材单价" readonly placeholder="单价(元/㎡)" v-model="ele.productprice" text-align="right"></x-input>
                      <x-input readonly class="vux-1px-b" title="高度" type='text' placeholder="请输入高度(单位：mm)" :show-clear="false" v-model="ele.height" text-align="right"></x-input>
                      <div class="width">
                        <span class="width-left">宽度</span>
                        <input readonly class="width-right" type="text" placeholder="请输入宽度(单位：mm)" v-model="ele.width">
                      </div>
                      <popup-picker :disabled=true title="拉手类型" v-model="ele.fitting" placeholder="请选择拉手类型"></popup-picker>
                      <x-input class="vux-1px-b" title="拉手单价" type='number' readonly placeholder="单价(元/m)" :show-clear="false" v-model="ele.fittingprice" text-align="right"></x-input>
                      <div class="width">
                        <span class="width-left">数量</span>
                        <input readonly class="width-right" type="text" placeholder="请输入您需要的数量" v-model="ele.num">
                      </div>
                      <x-input disabled title="小计" readonly type='number' :show-clear="false" v-model="ele.totalmoney" text-align="right"></x-input>
                    </group>
                  </div>
                </yd-accordion-item>
              </div>
            </yd-accordion>
            <div class="mar-t10"></div>
          </div>
        </yd-accordion-item>
      </yd-accordion>
    </div>
    <!-- 折叠面板内容 -->
    <!-- 信息汇总 -->
    <div class="total-wrapper">
      <div class="total-left">
        <div>总板数</div>
        <div class="total-bottom">{{totalnum}}块</div>
      </div>
      <div class="total-center">
        <div v-if="totalarea<=0">
          <div>
            总面积
          </div>
          <div class="total-bottom">
            0m²
          </div>
        </div>
        <div>
          <div>
            总面积
          </div>
          <div class="total-bottom">
            {{totalarea}}m²
          </div>
        </div>
      </div>
      <div class="total-right">
        <div v-if="totalPrice<=0">
          <div>
            总计
          </div>
          <div class="total-bottom">0元</div>
        </div>
        <div>
          <div>
            总计
          </div>
          <div class="total-bottom">
            {{totalPrice}}元
          </div>
        </div>
      </div>
    </div>
    <!-- 信息汇总 -->
    <!-- 用户信息 -->
    <div class="userInfo-wrapper">
      <div class="name-wrapper">
        <span slot="left">姓名：</span>
        <input slot="right" v-model="name"  readonly>
      </div>
      <div class="tel-wrapper">
        <span slot="left">手机号：</span>
        <input slot="right" v-model="tel" readonly />
      </div>
      <div class="tel-wrapper">
        <span slot="left">所在地区：</span>
        <input slot="right" v-model="adress" readonly />
      </div>
      <div class="tel-wrapper">
        <span slot="left">街道地址：</span>
        <input slot="right" v-model="datailAdress" readonly />
      </div>
    </div>
    <!-- 用户信息 -->
    <div class="btn-wrapper" v-if="status===0">
      <div class="agreed-btn" style="margin:0 35px 0 0">
        <yd-button style="fontSize:16px" size="large" type="primary" @click.native="agree" :disabled='isDisabled'>通过</yd-button>
      </div>
      <div class="refused-btn">
        <yd-button style="fontSize:16px" size="large" type="danger" @click.native="refuse">不通过</yd-button>
      </div>
    </div>
    <div class="btn-wrapper" v-else-if="status===1">
      <div class="agreed-btn">
        <yd-button style="fontSize:16px" size="large" type="primary" @click.native="completeTwo" :disabled='isDisabled'>已完成</yd-button>
      </div>
    </div>
    <div class="btn-wrapper" v-else-if="status===2">
      <div class="agreed-btn">
        <yd-button style="fontSize:16px" size="large" type="primary" @click.native="completeThree" :disabled='isDisabled'>已完成</yd-button>
      </div>
    </div>
    <div class="btn-wrapper" v-else-if="status===3">
      <div class="agreed-btn">
        <yd-button style="fontSize:16px" size="large" type="primary" @click.native="completeFour" :disabled='isDisabled'>已完成</yd-button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {
    Group,
    PopupRadio,
    Cell,
    XInput,
    PopupPicker,
  } from "vux";
  import District from "ydui-district/dist/jd_province_city_area_id";
  import apis from '../../../static/js/api.js'
  import getUrl from "../../../static/js/getUrl.js";
  export default {
    components: {
      Group,
      PopupRadio,
      Cell,
      XInput,
      PopupPicker
    },
    data() {
      return {
        typeOptions: ["地柜", "吊柜"],
        dirOptions: ["左开", "右开", "不开", "见光", "拉篮", "假门","上翻门"],
        name: "",
        tel: "",
        isShowAddress: false,
        adress: "云南  昆明市  官渡区",
        district: District,
        datailAdress: "",
        isDisabled: false,
        countData: ["lashou"],
        totalarea: null,
        totalnum: null,
        totalPrice: null,
        orderid: null,
        wxuserinfoid: '',
        status: 0
      };
    },
    created() {
      // 获取微信用户的id
      this.wxuserinfoid = getUrl().wxuserinfoid;
      // 获取路由参数+获取把手信息
      this.orderid = this.$route.query.id;
      // 获取用户信息和权限类型进行数据请求
      this.postUserInfo();
    },
    methods: {
      // 获取用户信息和权限类型进行数据请求
      postUserInfo() {
        this.$vux.loading.show({
          text: "正在加载"
        });
        var qs = require('querystring')
        this.$axios.post(`${apis}/auth/messagep`,
            qs.stringify({
              vid: this.wxuserinfoid
            }))
          .then(response => {
            if (response.data) {
              this.$vux.loading.hide();
              this.userInfo = response.data;
              localStorage.setItem('userInfo', JSON.stringify(this.userInfo));
              this.postOrderDetail();
            }
          })
          .catch(error => {
            console.log(error)
            this.$vux.loading.hide();
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      },
      // 获取订单详情的数据
      postOrderDetail() {
        this.$vux.loading.show({
          text: "正在加载"
        });
        this.$axios
          .post(
            `${apis}/app/order/orderdetail`,
            this.confusion(
              JSON.stringify({
                orderid: this.orderid
              })
            ), {
              headers: {
                Authorization: "Bearer " +
                  JSON.parse(window.localStorage.getItem("userInfo")).token,
                "Content-Type": "application/json;charset=UTF-8",
                "Cache-Control": "no-cache",
                isApp: "isApp"
              }
            }
          )
          .then(response => {
            this.$vux.loading.hide();
            let {
              name,
              adress,
              datailAdress,
              tel,
              totalarea,
              totalnum,
              totalPrice,
              countData,
              status
            } = response.data;
            this.status = status;
            this.name = name;
            this.adress = adress;
            this.datailAdress = datailAdress;
            this.tel = tel;
            this.totalarea = totalarea;
            this.totalnum = totalnum;
            this.totalPrice = totalPrice;
            this.countData = countData;
          })
          .catch(error => {
            this.$vux.loading.hide();
            console.log(error);
            this.$dialog.toast({
              mes: "服务器异常"
            });
          });
      },
      // 拒绝订单
      refuse() {
        const that = this;
        this.$vux.confirm.show({
          title: '提示',
          content: '是否确定不接单',
          onConfirm() {
            that.$vux.loading.show({
              text: "请稍后"
            });
            that.$axios
              .post(
                `${apis}/app/order/orderdelete`,
                that.confusion(
                  JSON.stringify({
                    orderid: that.orderid
                  })
                ), {
                  headers: {
                    Authorization: "Bearer " +
                      JSON.parse(window.localStorage.getItem("userInfo")).token,
                    "Content-Type": "application/json;charset=UTF-8",
                    "Cache-Control": "no-cache",
                    isApp: "isApp"
                  }
                }
              )
              .then(response => {
                that.$vux.loading.hide();
                that.$router.push({
                  path: '/process',
                  query: {
                    wxuserinfoid: that.wxuserinfoid
                  }
                });
              })
              .catch(error => {
                that.$vux.loading.hide();
                console.log(error);
                that.$dialog.toast({
                  mes: "服务器异常"
                });
              });
          }
        })
      },
      // 接单
      agree() {
        const that = this;
        this.$vux.confirm.show({
          title: '提示',
          content: '是否确定接单',
          onConfirm() {
            that.$vux.loading.show({
              text: "请稍后"
            });
            that.$axios
              .post(
                `${apis}/app/order/orderaudit`,
                that.confusion(
                  JSON.stringify({
                    orderid: that.orderid
                  })
                ), {
                  headers: {
                    Authorization: "Bearer " +
                      JSON.parse(window.localStorage.getItem("userInfo")).token,
                    "Content-Type": "application/json;charset=UTF-8",
                    "Cache-Control": "no-cache",
                    isApp: "isApp"
                  }
                }
              )
              .then(response => {
                that.$vux.loading.hide();
                that.$router.push({
                  path: '/process',
                  query: {
                    wxuserinfoid: that.wxuserinfoid
                  }
                });
              })
              .catch(error => {
                that.$vux.loading.hide();
                console.log(error);
                that.$dialog.toast({
                  mes: "服务器异常"
                });
              });
          }
        })
      },
      // 已经加工完成
      completeTwo() {
        const that = this;
        this.$vux.confirm.show({
          title: '提示',
          content: '是否加工完成',
          onConfirm() {
            that.$vux.loading.show({
              text: "请稍后"
            });
            that.$axios
              .post(
                `${apis}/app/order/orderaudit`,
                that.confusion(
                  JSON.stringify({
                    orderid: that.orderid
                  })
                ), {
                  headers: {
                    Authorization: "Bearer " +
                      JSON.parse(window.localStorage.getItem("userInfo")).token,
                    "Content-Type": "application/json;charset=UTF-8",
                    "Cache-Control": "no-cache",
                    isApp: "isApp"
                  }
                }
              )
              .then(response => {
                that.$vux.loading.hide();
                that.$router.push({
                  path: '/process',
                  query: {
                    wxuserinfoid: that.wxuserinfoid
                  }
                });
              })
              .catch(error => {
                that.$vux.loading.hide();
                console.log(error);
                that.$dialog.toast({
                  mes: "服务器异常"
                });
              });
          }
        })
      },
      // 已经包装完成
      completeThree() {
        const that = this;
        this.$vux.confirm.show({
          title: '提示',
          content: '是否已经包装完成',
          onConfirm() {
            that.$vux.loading.show({
              text: "请稍后"
            });
            that.$axios
              .post(
                `${apis}/app/order/orderaudit`,
                that.confusion(
                  JSON.stringify({
                    orderid: that.orderid
                  })
                ), {
                  headers: {
                    Authorization: "Bearer " +
                      JSON.parse(window.localStorage.getItem("userInfo")).token,
                    "Content-Type": "application/json;charset=UTF-8",
                    "Cache-Control": "no-cache",
                    isApp: "isApp"
                  }
                }
              )
              .then(response => {
                that.$vux.loading.hide();
                that.$router.push({
                  path: '/process',
                  query: {
                    wxuserinfoid: that.wxuserinfoid
                  }
                });
              })
              .catch(error => {
                that.$vux.loading.hide();
                console.log(error);
                that.$dialog.toast({
                  mes: "服务器异常"
                });
              });
          }
        })
      },
      // 已发货
      completeFour() {
        const that = this;
        this.$vux.confirm.show({
          title: '提示',
          content: '是否确认已经发货',
          onConfirm() {
            that.$vux.loading.show({
              text: "请稍后"
            });
            that.$axios
              .post(
                `${apis}/app/order/orderaudit`,
                that.confusion(
                  JSON.stringify({
                    orderid: that.orderid
                  })
                ), {
                  headers: {
                    Authorization: "Bearer " +
                      JSON.parse(window.localStorage.getItem("userInfo")).token,
                    "Content-Type": "application/json;charset=UTF-8",
                    "Cache-Control": "no-cache",
                    isApp: "isApp"
                  }
                }
              )
              .then(response => {
                that.$vux.loading.hide();
                that.$router.push({
                  path: '/process',
                  query: {
                    wxuserinfoid: that.wxuserinfoid
                  }
                });
              })
              .catch(error => {
                that.$vux.loading.hide();
                console.log(error);
                that.$dialog.toast({
                  mes: "服务器异常"
                });
              });
          }
        })
      },
      // 返回列表页面
      backProcess() {
        this.$router.push({
          path: '/process',
          query: {
            wxuserinfoid: this.wxuserinfoid
          }
        });
      }
    }
  };
</script>

<style scoped>
  .bgc {
    background-color: #f7f7f7;
  }
  .detail {
    position: fixed;
    overflow: scroll;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  .header-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
  }
  .content-wrapper {
    margin-top: 40px;
    background-color: #000;
  }
  .mian>>>.vux-1px-b:after {
    left: 15px;
  }
  .demo3-slot {
    text-align: center;
    color: #888;
    line-height: 40px;
  }
  .width {
    display: flex;
    padding: 10px 15px;
  }
  .width-left,
  .width-right {
    flex: 1;
  }
  .width-right {
    text-align: right;
  }
  .total-wrapper {
    display: flex;
    padding-bottom: 10px;
    margin-top: 8px;
    margin-bottom: -50px;
    font-size: 14px;
    border-bottom: 1px solid #e1e1e1;
  }
  .total-left {
    flex: 1;
    text-align: center;
  }
  .total-center {
    flex: 1;
    text-align: center;
  }
  .total-right {
    flex: 1;
    text-align: center;
  }
  .total-bottom {
    margin-top: 6px;
    margin-bottom: 10px;
  }
  .userInfo-wrapper {
    flex: 1;
    margin-top: 50px;
  }
  .yd-cell-right input[type="date"],
  .yd-cell-right input[type="datetime-local"],
  .yd-cell-right input[type="email"],
  .yd-cell-right input[type="number"]:not(.yd-spinner-input),
  .yd-cell-right input[type="password"],
  .yd-cell-right input[type="tel"],
  .yd-cell-right input[type="text"],
  .yd-cell-right input[type="time"],
  .yd-cell-right input[type="url"] {
    height: 40px;
  }
  .name-wrapper {
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #e1e1e1;
  }
  .tel-wrapper {
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #e1e1e1;
  }
  .btn-wrapper {
    display: flex;
    padding: 50px;
  }
  .agreed-btn {
    flex: 3;
  }
  .refused-btn {
    flex: 3;
  }
</style>
